import React, { Component } from 'react'
// 导入pubsub-js，用于订阅Search组件
import PUbSub from 'pubsub-js';
import './index.css'
export default class List extends Component {

    state = {
        userList: [],
        // 根据搜索状态来做不同的UI展示
        isFirst: true,
        loading: false,
        error: ''
    }

    componentDidMount(){
        // 订阅父组件
        // 这里需要注意，回调函数的第一个参数是返回topic的名称，但实际上我们并不需要，所以可以使用'_'，表示
        PUbSub.subscribe('List',(_,data)=>{
            this.setState(data);
        })
    }

    render() {
        const { isFirst,loading,error,userList } = this.state;
        return (
            <div className="row">
                {
                    isFirst ? <h3>欢迎使用GitHub用户查询</h3> :
                    loading? <h3>Loading...</h3>:
                    error ? <h2 style={{color: 'red'}}>{error}</h2> : 
                    userList.map((userObj) => {
                      return (  <div className="card" key={userObj.id}>
                            <a rel="noreferrer" href={userObj.html_url} target="_blank">
                                <img alt="pic can not be loaded" src={userObj.avatar_url} style={{ width: '100px' }} />
                            </a>
                            <p className="card-text">{userObj.login}</p>
                        </div>)
                    })
                }
            </div>
        )
    }
}
